<section>
  <h5>Using Tab navigate to Dropdown Toggle Element, it will auto open</h5>
  <div class="btn-group g-dropdown" dDropDown (toggleEvent)="onToggle($event)">
    <a dDropDownToggle [toggleOnFocus]="true" class="devui-dropdown-default devui-dropdown-origin">
      More
      <span class="icon-chevron-down-2"></span>
    </a>

    <ul dDropDownMenu class="devui-dropdown-menu" role="menu">
      <li role="menuitem">
        <input type="text" class="devui-input devui-input-sm devui-search-in-dropdown" placeholder="input box" />
        <div class="icon-in-search">
          <i class="icon icon-search"></i>
        </div>
      </li>
      <li class="disabled" role="menuitem">
        <a dDropDownMenuItem class="disabled">Disabled Option</a>
      </li>
      <li role="menuitem">
        <a dDropDownMenuItem>New</a>
      </li>
      <li role="menuitem">
        <a dDropDownMenuItem>Delete</a>
      </li>
      <li role="menuitem">
        <a dDropDownMenuItem>Item 1</a>
      </li>
      <li class="disabled" role="menuitem">
        <a dDropDownMenuItem class="disabled">Item 2</a>
      </li>
      <li role="menuitem">
        <a dDropDownMenuItem>Item 3</a>
      </li>
      <li role="menuitem">
        <a dDropDownMenuItem>Item 4</a>
      </li>
    </ul>
  </div>
</section>

<section>
  <h5>auto focus after initiating, use toggleOnFocus at the same time to open menu</h5>
  <div class="dropdown-initial"><d-toggle [(ngModel)]="showExample"></d-toggle> Initiate/Destroy</div>
  <div class="btn-group g-dropdown" dDropDown (toggleEvent)="onToggle($event)" *ngIf="showExample">
    <a dDropDownToggle [autoFocus]="true" [toggleOnFocus]="true" class="devui-dropdown-default devui-dropdown-origin">
      More
      <span class="icon-chevron-down-2"></span>
    </a>

    <ul dDropDownMenu class="devui-dropdown-menu devui-scrollbar" role="menu">
      <li role="menuitem">
        <input type="text" class="devui-input devui-input-sm devui-search-in-dropdown" placeholder="input box" />
        <div class="icon-in-search">
          <i class="icon icon-search"></i>
        </div>
      </li>
      <li class="disabled" role="menuitem">
        <a dDropDownMenuItem class="disabled">Disabled Option</a>
      </li>
      <li role="menuitem">
        <a dDropDownMenuItem>New</a>
      </li>
      <li role="menuitem">
        <a dDropDownMenuItem>Delete</a>
      </li>
      <li role="menuitem">
        <a dDropDownMenuItem>Item 1</a>
      </li>
      <li class="disabled" role="menuitem">
        <a dDropDownMenuItem class="disabled">Item 2</a>
      </li>
      <li role="menuitem">
        <a dDropDownMenuItem>Item 3</a>
      </li>
      <li role="menuitem">
        <a dDropDownMenuItem>Item 4</a>
      </li>
    </ul>
  </div>
</section>
